import React, {JSX, ReactNode, useCallback, useMemo} from 'react';
import {TouchableOpacity, StyleSheet, NativeModules} from 'react-native';
import {BasicText} from '../text';
import {Props as BasicTextProps} from '../text/BasicText';
import Clipboard from '@react-native-clipboard/clipboard';
import { normalize } from '../../utils/adapter';

type Props = {
  text: string;
  children: string | number | undefined | ReactNode;
  onPress?: (value:string) => void;
};

function CopyButtom({
  children,
  fontSize,
  color,
  fontWeight,
  text,
  onPress,
}: Props & BasicTextProps): JSX.Element {
  const {bridgeModule} = NativeModules;

  const onCopy = useCallback(() => {
    Clipboard.setString(text);
    bridgeModule.showToast('复制成功');
    onPress && onPress(text);
  }, [bridgeModule, onPress, text]);

  const basicTextProps: BasicTextProps = useMemo(() => {
    return {
      fontSize,
      color,
      fontWeight,
    };
  }, [color, fontSize, fontWeight]);

  return (
    <TouchableOpacity style={styles.copy} onPress={onCopy}>
      <BasicText {...basicTextProps}>{children}</BasicText>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  copy: {
    width: normalize(32),
    height: normalize(16),
    backgroundColor: '#fff',
    borderRadius: normalize(4),
    overflow: 'hidden',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default CopyButtom;
